<template>
  <div class="songline" >
      <!-- hover的样式 -->
      <div class="hov" >
        <div class="empty"></div>
      <!-- # 序号-->
      <span class="span1" >      
      </span>
      <!-- 标题 -->
      <div class="span2">
        <img :src="src" alt="">
        <span></span>
      </div>        
      </div>
    <div class="songlist" @click="toMusicList">
      <div class="empty"></div>
      <!-- # 序号-->
      <span class="span1" id="spanNone" @click="start=!start">
        {{ col<10?'0'+(col+1):col+1 }}</span>
      <!-- 标题 -->
      <div class="span2">
        <img :src="src" alt="">
        <span>{{ list.playlist_name }}</span>
        <!-- 一图层 -->
        <div class="svg">       
      </div>
      </div>
      <!-- 创建者 -->
      <span class="span3">{{ list.playlist_id}}</span>
      <!-- 歌曲数 -->
      <span class="span4">
       655首
      </span>
      <!-- 播放量 -->
      <span class="span5">2352</span>
    </div>
  </div>
</template>

<script>
import { url } from '@/apiUrl';
export default {
  data() {
    return {
      src: `${url}/${this.list.playlist_coverUrl}`,
    }
  },
  props:{
    list:{},
    index:null,
    col:null
  },
  methods:{
    toMusicList(){
      console.log("传递的歌单信息", this.list);
      this.$router.push({
        path: '/musicList',
        query: {
          playlist_id: this.list.playlist_id,//传递歌单id
          listDetails: this.list//传递歌单信息
        }
      }).catch((err) => { });//导航到相应路径
    },
  }
}
</script>

<style lang="scss" scoped>
@import '/src/assets/common.scss';

.empty2{
  width:53rem;
}
.icon{
  color:gray;
}
.hov{
  display: none;
  position: absolute;
  z-index:-10;
}

.songline:hover .hov{
.icon-bofang{
  color:#666666;
  margin-left: -1.2rem;
  cursor: pointer;
}
.icon-zanting{
  margin-left:-0.5rem;
}
      margin: 0 1rem;
      display: flex;
      align-items: center;
      background-color:$undercolor-1;
      width: 98.3%;
      height: 100%;
      position: absolute;
      border-radius:0.7rem;
}
.songline:hover 
#spanNone{ 
      opacity: 0;
      cursor: pointer;
}
.songline:hover
 .svg{
      margin-left: 45rem;
      width: 9rem;
      display: block;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
}
.songline {
  user-select: none;
  z-index: 0;
  position: relative;//会导致元素穿透
}  
img{
    margin-right:1rem;
    width: 36px;
    border-radius:0.4rem;
  }
.songlist{
  // display: none;
  position: relative;//会导致元素穿透
  margin: 1rem;
  display: flex;
  align-items: center;
}
.empty {
    width: $empty-w;
    
  }

  .span1 {
    // margin-left: -0.5rem;
    width: $span1-w;
  }

  .span2 {
    width: $span2-w;
    display: flex;
    align-items: center;
    .svg{
      display: none;
    }
    .svg,span,img{
      cursor:pointer;
    }
  }

  .span3 {
    width: $span3-w;
    cursor:pointer;
  }

  .span4 {
    width: $span4-w;
  }

  .span5 {
    width: $span5-w;
  }
</style>